<form id="categoryForm"  class="form-horizontal" method="post">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h5 class="blue">新增分类</h5>
    </div>

    <div class="modal-body">
        <!--显示父类 -->
        <#if parentCategory ??>
            <input type="hidden" name="level" value="${parentCategory.level}">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="parentName">父类名:</label>
                <div class="col-xs-12 col-sm-9">
                    <div class="clearfix">
                        <input type="text" name="parentName" id="parentName" class="col-xs-12 col-sm-4 required" value="${parentCategory.categoryName!}" readonly/>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="parentId">父类id:</label>
                <div class="col-xs-12 col-sm-9">
                    <div class="clearfix">
                        <input type="text" name="parentId" id="parentId" class="col-xs-12 col-sm-4 required" value="${parentCategory.id!}" readonly/>
                    </div>
                </div>
            </div>
        </#if>
        <input type="hidden" id="id" name="id" value="${category.id!}">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="categoryName">分类名:</label>
            <div class="col-xs-12 col-sm-9">
                <div class="clearfix">
                    <input type="text" name="categoryName" id="categoryName" class="col-xs-12 col-sm-4 required" value="${category.categoryName!}"/>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="categoryValue">分类标识:</label>
            <div class="col-xs-12 col-sm-9">
                <div class="clearfix">
                    <textarea  name="categoryValue" id="categoryValue" class="required" value="${category.categoryValue!}">${category.categoryValue!}</textarea>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="sortIndex">排序号:</label>
            <div class="col-xs-12 col-sm-9">
                <div class="clearfix">
                    <input type="number" name="sortIndex" id="sortIndex" class="col-xs-12 col-sm-4 required"  max="99999999999" value="${category.sortIndex!}"/>
                </div>
            </div>
        </div>
        <#if parentCategory?? && parentCategory.level ==2>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="isRec">是否推荐:</label>
                <div class="col-xs-5 col-sm-9">
                    <div class="clearfix">
                        <div>
                            <select class="chosen-select form-control" name="isRec" id="isRec" data-placeholder="Choose a State...">
                                <option value="0">不推荐</option>
                                <option value="1">推荐</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </#if>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="state">状态:</label>
            <div class="col-xs-5 col-sm-9">
                <div class="clearfix">
                    <div>
                        <select class="chosen-select form-control" name="state" id="state" data-placeholder="Choose a State...">
                            <option value="1">显示</option>
                            <option value="0">隐藏</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="summary">简介:</label>
            <div class="col-xs-12 col-sm-9">
                <div class="clearfix">
                    <span class="input-icon input-icon-right">
                        <textarea  name="summary" id="summary" value="${category.summary!}" class="required summary">${category.summary!}</textarea>
                        <i class="ace-icon fa fa-envelope"></i>
                    </span>
                </div>
            </div>
        </div>
        <!--上传ICON块---->
        <div class="row">
            <div class="col-sm-12">
                <div class="widget-box">
                    <div class="widget-header">
                        <h4 class="widget-title">上传图标</h4>
                    </div>
                    <div class="widget-body">
                        <div class="widget-main">
                            <div class="form-group">
                                <div class="col-xs-8">
                                    <!-- #section:custom/file-input -->
                                    <input type="file" id="id-input-icon" name="iconFile"/>
                                </div>
                                <button type="button" id="id-button-icon" class="btn btn-sm btn-success" onclick="uploadIcon()">
                                    上传 <i class="ace-icon fa fa-arrow-right icon-on-right bigger-60"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="widget-body">
                        <div class="widget-main">
                            <div>
                                <ul class="ace-thumbnails clearfix">
                                    <li><a id="icon128a" data-rel="colorbox">
                                        <img id="iconImg" name="iconImg" src="${staticHost}${category.iconUrl!}" width="128" height="128" />
                                        <input type="hidden" name="iconUrl" id="iconUrl" value="${staticHost}${category.iconUrl!}">
                                    </a>
                                    </li>
                                    </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <div class="modal-footer center">
        <button type="submit" class="btn btn-sm btn-success"><i class="ace-icon fa fa-check"></i> 保存</button>
        <button type="button" class="btn btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times"></i> 取消</button>
    </div>

</form>
<script src="${ctx}/static/admin/assets/js/jquery.validate.js"></script>
<script src="${ctx}/static/admin/assets/js/jquery.validate.messages_zh.js"></script>
<script type="text/javascript">



    $(document).ready(function(){
        $("#isRec").val(${category.isRec!});

        $(".date-picker").datepicker({
            language : 'zh-CN',
            autoclose: true,
            todayHighlight: true
        });

        $("#categoryForm").validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: true,
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
            },
            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
                $(e).remove();
            },
            errorPlacement: function (error, element) {
                if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                    var controls = element.closest('div[class*="col-"]');
                    if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
                    else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                }
                else if(element.is('.select2')) {
                    error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                }
                else if(element.is('.chosen-select')) {
                    error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                }
                else error.insertAfter(element.parent());
            },

            submitHandler: function (form) {
              //  $("[data-tt-id=223]").attr("xxxx");
              //  $("[data-tt-id=222]").remove();
             //   $()
                var id =$("#id").val();
                var flag=false;
                if(id==""){
                    flag=true;
                }
                var $self = $(this);
                $.ajax({
                    type: "POST",
                    url:"${ctx}/admin/category/save.do",
                    data:$("#categoryForm").serialize(),
                    dataType: 'text',
                    success: function(msg){
                        var msg = eval("("+msg+")");
                        if(msg.result == "success"){
                            $('#editModal').modal('hide');
                            if(flag) {
                                var category = msg.data;
                                var em=0;
                                if(category.level==2){
                                    em=2;
                                }else if(category.level==3){
                                    em=4;
                                }
                                var html = "<tr data-tt-id='" + category.id + "'data-tt-parent-id='"+category.parentId+"'><td style='padding-left: "+em+"em'><span class='folder ui-draggable'>" + category.categoryName + "</span></td><td><img height='64' width='64' src='" + category.iconUrl + "' onerror=\"this.src='${ctx}/static/admin/assets/img/imgerror.png'\"></td>"
                                        + "<td>" + category.id + "</td><td>" + category.parentId + "</td><td>" + category.sortIndex + "</td><td>";
                                if (category.state == 1) {
                                    html = html + "<div>显示</div></td>";
                                } else {
                                    html = html + "<div>隐藏</div></td>";
                                }
                                html = html + "<td><div class='hidden-sm hidden-xs action-buttons'>";
                                if(category.level <3){
                                    html=html+" <a class='orange tooltip-success addSub' href='${ctx}/admin/category/add.html?parentId="+category.id+"' data-rel='tooltip' title='添加子分类' data-toggle='modal' data-target='#editModal'><span class='label label-success'>添加子分类</span></a>";
                                }
                                html=html+"<a class='green tooltip-success edit' href='${ctx}/admin/category/view.html?id="+category.id+"' data-rel='tooltip' title='编辑' data-toggle='modal' data-target='#editModal'><span class='label label-success'>编辑</span></a>";
                            if(category.state == 1){
                                html=html+"<a class='grey tooltip-success stateCategory' href='${ctx}/admin/category/state.do?id="+category.id+"&state=0' data-rel='tooltip' title='隐藏'> <span class='label label-info'>隐藏</span></a>";
                            }else{
                                html=html+"<a class='grey tooltip-success stateCategory' href='${ctx}/admin/category/state.do?id="+category.id+"&state=1' data-rel='tooltip' title='显示'> <span class='label label-info'>显示</span></a>";
                            }
                                html=html+"<a class='red tooltip-error delete' href='${ctx}/admin/category/delete.do?id="+category.id+"' data-rel='tooltip' title='删除' data='"+category.id+"'><span class='label label-danger'>删除</span></a></td></tr>";
                                /*  */
                               // var droppedEl = ui.draggable.parents("tr");
                              //  if(this != droppedEl[0] && !$(this).is(".expanded")) {
                                if(!$("[data-tt-id=" + category.parentId + "]").is(".expanded")) {
                                    $("#contentTable").treetable("expandNode", category.parentId);
                                }
                             //   }
                                var node= $("#contentTable").treetable("node", category.parentId);
                              $("#contentTable").treetable("loadBranch",node,html);
                             // $("[data-tt-id=" + category.parentId + "]").after(html);
                            }
                           // $self.closest('tr')
                        }else{
                            alert(msg.messages);
                            //bootbox.alert(msg.messages);
                        }
                    },
                    error: function(){
                        bootbox.alert("保存失败");
                    }
                });
            },
            invalidHandler: function (form) {
            }
        })

    });
</script>
<script src="${ctx}/static/admin/assets/js/ajaxfileupload.js"></script>
<script>

    $('#id-input-icon').ace_file_input({
        no_file:'未选择文件 ...',
        btn_choose:'浏览',
        btn_change:'更改',
        droppable:false,
        onchange:null,
        thumbnail:false,//| true | large
        whitelist:'png'
        //blacklist:'exe|php'
        //onchange:''
        //
    });

    function uploadIcon(){
        iconInfo();

        $.blockUI();
        $.ajaxFileUpload({
            url:"${ctx}/admin/upload/uploadPic.do?inputName=iconFile",            //需要链接到服务器地址
            dataType : 'text',
            fileElementId:'id-input-icon',                        //文件选择框的id属性
            success: function(data, status){
                $.unblockUI();
                msg = jQuery.parseJSON(jQuery(data).text());
                if(msg.result == "success"){
                    var upload=msg.data;
                    $("#iconUrl").val(upload);
                    $("#iconImg").attr("src","${staticHost}"+upload);
                }else{
                    alert(msg.messages);
                }
            },error: function (data, status, e){
                $.unblockUI();
                alert("上传出错，请重新上传");
            }
        });
    }

    function iconInfo(){
        var filepath = $("#id-input-icon").val();
        var extStart = filepath.lastIndexOf(".");
        var ext=filepath.substring(extStart,filepath.length).toUpperCase();
        if(ext != ".PNG"){
            alert("图片k限于png格式");
            return false;

        }
    }

</script>